<template>
    <view class="wrap">
        <view class="inptWrap">
            <input class="inputSyl" placeholder-style="color:#222229; font-size: 14px;" v-model="search" placeholder="请输入搜索内容" />
            <view class="search" @click="doSearch">搜索</view>
        </view>
        <view class="tabsWrap">
            <view class="tabs">
                <van-tabs :active="active" @change="onChange" color="#FF9839">
                    <van-tab v-for="(item,idx) in tabs" :key="idx" :title="item.itemText"></van-tab>
                </van-tabs>
            </view>
            <view class="vertailLine"></view>
            <view class="orderInfo" @click="changeOrder">
                <view class="text">{{ order == 1 ? '时间' : '热度' }}</view>
                <image :src="getImgUrl('/img/allImgs/forum/choose.svg')" />
            </view>
        </view>

        <view class="content" >
            <view class="Info" v-for="(item,idx) in comList" :key="idx">
                    <view class="details">
                        <view class="avatarInfo" @click="handleList(item.userId,item.headPortrait,item.nickname)">
                            <image :src="item.headPortrait != null ?  item.headPortrait  : 'https://img95.699pic.com/xsj/10/tm/0h.jpg%21/fh/300'" />
                            <view class="nameWrap">
                                <view class="name">{{item.nickname == null ? 0 : item.nickname }}</view>
                                <view class="timeWrap">
                                    <view class="hot" style="margin-right: 20rpx; font-size: 10px;">{{ item.createTime }}</view>
                                    <view class="hot">
                                        <image style="width: 36rpx; height: 36rpx" :src="getImgUrl('/img/allImgs/forum/hot.svg')"/>
                                        <view>热度：{{item.pageView}}</view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view style="width: 400rpx;" @click="handleDetails(item.id)">
                        </view>
                    </view>
                    <view @click="handleDetails(item.id)">
                        <!-- <view class="forumContent">{{ item.postContent }}</view> -->
                        <rich-text class="forumContent" :nodes=" item.postContent.replace(/\n/g, '<br/>')"></rich-text>
                        <view class="imgInfo" >
                            <image mode="aspectFill" v-for="(child,index) in item.postPicture" :key="index" :src="child.pricturePath" />
                        </view>
                    </view>
                <view class="view">
                    <view class="contInfo">
                        <image style="width: 40rpx; height: 40rpx" :src="getImgUrl('/img/allImgs/forum/show.svg')" />
                        <view class="count">{{item.pageView}}</view>
                    </view>
                    <view class="contInfo">
                        <image style="width: 40rpx; height: 40rpx" :src="getImgUrl('/img/allImgs/forum/review.svg')" />
                        <view class="count">{{item.commentVolume}}</view>
                    </view>
                    <view class="contInfo"  @click="addLike(item.id,item.numberLikes,item.like,idx)">
						<view class="iconfont icon-like" :style="{color: item.like == 1 ? '#FF3839' : '#4A4A4A'}"></view>
                        <view class="count">{{ item.numberLikes }}</view>
                    </view>
                </view>
            </view>
            <view class="warn" v-if="showMore">暂无更多数据...</view>
            
        </view>
        <uni-fab
			:pattern="pattern"
			:content="content"
			:horizontal="horizontal"
			:vertical="vertical"
			:direction="direction"
            @fabClick="openForum"
		></uni-fab>

        <view v-if="show">
            <no-more></no-more>
        </view>
        
    </view>
</template>

<script>
import { getHomeListAPI, addLikeAPI } from '../../../utils/api'
import { baseURL } from '../../../utils/baseUrl';
import { imgBaseUrl } from '../../../utils/baseUrl.js'
import noMore from '../../../components/no-data/no-more.vue'
    export default {
        components:{noMore},
        data(){
            return{
                title: 'uni-fab',
				directionStr: '垂直',
				horizontal: 'left',
				vertical: 'bottom',
				direction: 'horizontal',
                search:'',
                pageNo:1, //分页
                showMore: false,
                baseUrl:baseURL,
                show: false,
                tabs:[],
                comList:[],
				searchVls:'',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
                items:['热度','时间'],
                active:0,// tab选择
                order:0, // 搜索排序
				wishtype:'健康'
            }
        }, 
        onLoad(option){		
            let tabsInfo = JSON.parse(option.tabs);
            tabsInfo.unshift({itemText:'全部'})
            this.tabs = tabsInfo
            this.active = Number(option.type);
			this.searchVls = decodeURIComponent(option.seachVls);
            this.search = decodeURIComponent(option.seachVls);
        },
        onShow(){
            this.pageNo = 1
            this.comList = [];
            this.search = this.search == 'undefined'? '':this.search
			if(this.searchVls != 'undefined' && this.searchVls != ''){
				this.getList('classify',this.searchVls)
			}else{
				this.getList();
			}
        },
        onReachBottom(){
            this.pageNo++;
            this.getList();
        },
        onHide(){
            this.show = false;
        },
        methods:{
            // 跳转帖子列表
            handleList(id,headPortrait,nickname){
                uni.navigateTo({
                    url:`../../../subPackagesB/pages/mypost/mypost?id=${id}&headPortrait=${headPortrait}&nickname=${nickname}`,
                })
            },
            // 帖子列表
            async getList(type, title){
                try {
                    const params = {
                        orderByType:this.order == '1' ? 'create_time' : 'reading_quantity',
                        pageNo:this.pageNo,
                        postType:this.tabs[this.active].itemText,
                        postState:0,
                        title: title
                    }
                    const res = await getHomeListAPI(params);
                    // for(const vls of res.result.records){
                    //     if(vls.postPicture != null){
                    //         for(const chilsVls of vls.postPicture){
                    //             chilsVls.pricturePath = baseURL+ '/'+chilsVls.pricturePath;				
                    //         }
                    //     }
                    // }
                    console.log("res============>",res)
                    console.log('res.result.records.length == 0 && this.pageNo == 1',res.result.records.length == 0 && this.pageNo == 1)
                    if(res.result.records.length == 0 && this.pageNo == 1){
                        this.show = true
                    }
                    if(res.result.records.length < 10 && this.pageNo != 1){
                        this.showMore = true
                    }
                    if(type == 'classify'){
                        this.comList = [...res.result.records];   
                    }else{
                        this.comList = [...this.comList,...res.result.records];                    
                    }
                } catch (error) {
                    console.error('帖子列表报错了',error)
                }
            },
            // 帖子点赞
            async addLike(id,numberLikes,like,idx){
                try {
                    let params = {}
                    let obj = {}
                    if(like == 1){
                        params = {
                            id,
                            like:0,
                            numberLikes: numberLikes-1
                        }
                        this.comList[idx].like = 0;
                        this.comList[idx].numberLikes = numberLikes-1;
                        obj = this.comList[idx]
                    }else{
                        params = {
                            id,
                            like:1,
                            numberLikes: numberLikes+1
                        }
                        this.comList[idx].like = 1;
                        this.comList[idx].numberLikes = numberLikes+1;
                        obj = this.comList[idx]
                    }
                    await addLikeAPI(params);
                    this.$set(this.comList,idx,obj)
                    

                } catch (error) {
                    
                }
            },
            // 跳转详情
            handleDetails(id){
                uni.navigateTo({
                    url:`../../../subPackagesA/pages/forumDetails/forumDetails?id=${id}`
                })
            },
            // 新增论坛
            openForum(){
                uni.navigateTo({
                    url:`../../../subPackagesA/pages/addForum/addForum?wstype=${this.wishtype}`,
                })
            },
            // 排序
            changeOrder(e) {
                this.pageNo = 1;
                this.order = this.order == 1 ? 2 : 1;
                this.getList('classify',this.search);
            },
            // 搜索内容
            doSearch(e){
                this.getList('classify',this.search)
            },
            // tabbar更改
            onChange(e){
                // this.search = ''
				this.wishtype = e.target.title
				console.log(e.target.title,'e');
                this.active = e.detail.index,
				this.pageNo = 1
                this.getList('classify',this.search);
                this.show = false
            },
			// 图片渲染
			getImgUrl(image){
				return imgBaseUrl+image;
			},
			// getImg(image){
			// 	return baseURL + '/' + image;
			// },
        }
    }
</script>

<style lang="less" scoped>
.timeWrap{
    display: flex;

}
.tabsWrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding: 0 30rpx;
    .vertailLine{
        width: 1px;
        height: 16px;
        background: #D9D9D9;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        margin: 0 20rpx 0 0;
    }
    .tabs{
        width: 540rpx;
    }
    .orderInfo{
        display: flex;
        align-items: center;
        color: #999999;
        font-size: 14px;
        image{
            width: 38rpx;
            height: 42rpx;
            margin-left: 10rpx;
        }
    }
}
.order{
    padding: 20rpx 30rpx 0 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .orderContent{
        font-size: 12px;
        color: #8a8686;
    }
    .orderDetails{
        height: 60rpx;
        border: 1px solid #F5F5F5;
        border-radius: 30rpx;
        background-color: #fff;
        display: flex;
        align-items: center;
        color: #8a8686;
        padding: 0 20rpx;
        .orderContent{
            font-size: 12px;
            margin-right: 10rpx;
            color: #8a8686;
        }
    }
}
.inptWrap{
    background-color: #fff;
    display: flex;
    align-items: center;
}
.inputSyl{
    margin: 0 30rpx;
    padding-left: 20rpx;
    height: 60rpx;
    width: 80%;
    border-radius: 35rpx;
    padding-left: 10rpx;
    background: #F8F8F8;
}
.wrap{
    background-color: #F5F5F7;
}
.Info{
    margin-top: 30rpx;
    background-color: #fff;
    padding: 30rpx;
    border-radius: 10rpx;
    box-shadow: #d3d3d3 10rpx 10rpx 20rpx;
}

.view{
    display: flex;
    justify-content: space-around;
    .contInfo{
        display: flex;
		align-items: center;
		margin-top: 20rpx;
		justify-content: center;
		margin-top: 20rpx;
		width: 200rpx;
        .viewInfo{
            width: 60rpx;
            margin-left: 40rpx;
            color: #909090;
            display: flex;
            align-items: flex-end;
            font-size: 16px;
        }
        .count{
            color: #909090;
            font-size: 12px;
        }
    }
    
}

.forumContent{
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-all;
    color: #838383;
    line-height: 40rpx;
    font-size: 14px;
    margin-top: 10rpx;
}

.imgInfo{
    image{
        margin-top: 20rpx;
        width: 196rpx;
        height: 196rpx;
        margin-right: 20rpx;
        border-radius: 8rpx;
        &:nth-child(3n+3) {
            margin-right: 0 !important;
        }
    }
}

.title{
    margin-top: 20rpx;
    line-height: 50rpx;
    font-size: 16px;
    color: #4E4E4E;
}
.content{
    padding:0 30rpx;
    background-color: #fff;
    .details{
        display: flex;
        justify-content: space-between;
        .avatarInfo{
            display: flex;
            .nameWrap{
                margin-left: 20rpx;
                width: 360rpx;
                .name{
                    font-size: 14px;
                    color: #4D4D4D;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    width: 200rpx;
                }
                .hot{
                    display: flex;
                    align-items: center;
                    font-size: 11px;
                    color: #ADADAD;
                }
            }
            image{
                width: 80rpx;
                height: 80rpx;
                border-radius: 8rpx;
            }
        }

    }
}

.warn{
    text-align: center;
    padding-top: 30rpx;
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #888888;
}

</style>

<style>
page{
    background-color: #F5F5F5;
}
</style>